<template>
  <div class="form-view-row form-group-view">
    <form-view :fields="groupFields" :value="formViewValue">
    </form-view>
  </div>
</template>

<script>
import { viewProps } from '@src/component/form/components/props'

export default {
  name: 'form-group-view',
  props: {
    ...viewProps,
    value: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    groupFields() {
      return this.field?.children || this.field?.groupFields || []
    },
    formViewValue() {
      return this.value
    }
  }
}
</script>

<style lang="scss">
.form-group-view {
  padding-left: 0 !important;
  width: 100%;
  .form-view {
    width: 100%;
  }
}
</style>
